<template>
  <view class="w-80% m-a">
    <image src="https://pic.kanglailab.com/common/shareBanner.png" class="banner-image"></image>
    <view class="user-icon">
      <van-icon name="manager" color="#ffc300" size="60rpx" />
    </view>
    <view class="my-3 c-text-16 text-align-center font-bold">您的好友邀请您成为微聊好友</view>
    <view class="text-align-center c-text-14">加入后，您可以方便地使用微聊好友服务。</view>
    <view class="my-3 text-align-center">
      <van-button type="primary" custom-style="width:60%;background-color:#f5f5f5" plain @click="state.popupShow = true" :disabled="state.beeperList.length === 1 || state.beeperList.length === 0 ? true : false">
        <view v-if="state.beeperList.length > 1 && (state.beeperIndex === null || state.beeperIndex === undefined)">请选择呼叫器</view>
        <view v-if="state.beeperList.length === 0 && (state.beeperIndex === null || state.beeperIndex === undefined)">未绑定呼叫器，无法接收邀请</view>
        <view v-if="state.beeperIndex !== null && state.beeperIndex !== undefined">
          {{ state.chatName }}
        </view>
      </van-button>
    </view>
    <view class="text-align-center w-full position-fixed bottom-10 right-50% transform-translate-x-50%">
      <van-button custom-style="width:40%" type="primary" :disabled="state.beeperList.length === 0 ? true : false" @click="shareLocale">接受邀请</van-button>
      <view class="mt-3 c-text-14 text-align-center">若您是新用户，需要先注册后方可绑定。</view>
    </view>
    <van-popup position="bottom" :show="state.popupShow" @close="onClose">
      <van-picker show-toolbar value-key="name" :columns="state.beeperList" @confirm="onConfirm" @cancel="onClose" title="选择呼叫器" />
    </van-popup>
  </view>
</template>

<script setup lang="ts">
import EquipRequest from '@/request/equipRequest';
import useModal from '@/hooks/useModal';
import useToast from '@/hooks/useToast';
import { navigate } from '@/utils/navigate';
import { useAppStore } from '@/store';
interface IState {
  beeperList: IAssignBeeperList[];
  beeperId: number;
  beeperIndex?: number;
  chatBeeperId: number;
  chatName: string;
  popupShow: boolean;
}

const { showModal } = useModal();

const { showToast } = useToast();

const { userInfo } = useAppStore().$state;

const state = reactive<IState>({
  beeperList: [],
  beeperId: 0,
  chatBeeperId: 0,
  chatName: '',
  popupShow: false,
});

const onClose = () => {
  state.popupShow = false;
};

onLoad((options) => {
  if (!options) return;
  if (options.beeperId) {
    let startTime: any = new Date(options.startTime);
    let endTime: any = new Date(); // 结束时间
    let interval = Math.floor((endTime - startTime) / 1000 / 60); // 间隔【分钟】
    // 大于十分钟失效
    if (interval > 10) {
      showModal('当前分享连接已失效');
      setTimeout(() => {
        navigate({ url: '/pages/equipment/index', type: 'reLaunch' });
      }, 3000);
      return;
    }
    state.beeperId = options.beeperId;
  }
});

onShow(() => {
  getBeeperList();
});

// 点击接受邀请
const shareLocale = () => {
  if (state.beeperList.length === 0) {
    return false;
  }
  EquipRequest.AddMicroChatFriend({
    chatBeeperId: state.chatBeeperId,
    chatName: state.chatName,
    beeperId: state.beeperId,
  }).then((res) => {
    if (res.status === 0) {
      showToast('绑定成功', 'success');
      setTimeout(() => {
        navigate({ url: '/pages/equipment/index', type: 'reLaunch' });
      }, 1000);
    }
  });
};

const getBeeperList = () => {
  EquipRequest.GetAssignBeeper({
    openId: userInfo.openId,
  }).then((res) => {
    if (res.data.length > 0) {
      state.beeperList = res.data.filter((item) => item !== null);
      if (state.beeperList.length === 1) {
        state.beeperIndex = 0;
        state.chatBeeperId = state.beeperList[0].id;
        state.chatName = state.beeperList[0].name;
      }
    }
  });
};

const onConfirm = (e: any) => {
  state.beeperIndex = e.detail.index;
  state.chatBeeperId = e.detail.value.id;
  state.chatName = e.detail.value.name;
  onClose();
};
</script>

<style lang="scss" scoped>
.banner-image {
  margin: 50rpx;
  width: 515rpx;
  height: 450rpx;
}

.user-icon {
  padding: 30rpx;
  margin: auto;
  width: 60rpx;
  text-align: center;
  border: 1px solid #ffc300;
  border-radius: 50%;
}
</style>
